<template>
  <div>
    <div id="echartsMap" style="width: 1000px; height: 600px; border:1px solid red;"></div>
  </div>
</template>

<script>
import china from '@assets/map/china.json'

export default {
  name: "echartsMap",
  mounted() {
    this.init();
  },
  methods: {
    init(){
      let myChart = this.$echarts.init(document.getElementById("echartsMap"));
      this.$echarts.registerMap('中国', china);
      const option = {
        geo: {
          type: 'map',
          map: '中国',
          roam: true,
          zoom: 1.2,
          label: {
            normal: { //静态的时候展示样式
              show: true, //是否显示地图省份得名称
              textStyle: {
                color: "#fff",
                // fontSize: 10,
                fontFamily: "Arial"
              }
            },
            emphasis: { //动态展示的样式
              color:'#0d203c',
            },
          },
          itemStyle: {
            normal: {
              borderColor: "#0bfef5",
              areaColor: '#3b8bf1',
              textStyle: {
                color: "#fff"
              },
              shadowBlur: 10,
              shadowOffsetX: 10,
            },
            emphasis: {
              areaColor: "#0cffff",
              color: "#fff"
            },
          },
        }
      }
      myChart.setOption(option);

      window.addEventListener("resize", function() {
        myChart.resize();
      });

      myChart.on('click', function(params) {
        console.log(myChart.convertFromPixel('geo', [params.event.offsetX, params.event.offsetY]));
        if(params.componentType=='series'){
          alert('点击了'+params.data.name)
        }
      });

    }
  }
}
</script>

<style scoped>

</style>